<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="product-box com-box">
			<view class="carousel">
				<swiper indicator-dots circular=true duration="400">
					<swiper-item class="swiper-item" v-for="(item, index) in goods.goodsPicList" :key="index">
						<view class="image-wrapper">
							<image :src="item" mode="aspectFill" lazy-load></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="introduce-section">
				<text class="title clamp2">{{goods.goodsName}}</text>
				<view class="price-box">
					<text class="price">¥{{isAuth ? goods.price : '***'}}</text>
					<text class="size">{{goods.specification}}</text>
					<text class="time">截止时间：{{$util.sliceTime(goods.endDate)}}</text>
				</view>
				<!-- #ifdef H5 -->
				<view class="attr-content pc">
					<view class="attr-list">
						<view class="item-list">
							<view class="ttl">规格</view>
							<view class="tit-box">
								<text class="tit selected">{{goods.specification}}</text>
							</view>
						</view>
						<view class="item-list">
							<view class="ttl">数量</view>
							<uni-number-box class="step" :min="1" :max="goods.stock" :value="buyCount" @eventChange="numberChange"></uni-number-box>
						</view>
						<view class="item-list">
							<view class="ttl">定金</view>
							<view class="price-item">¥{{isAuth ? (goods.price * buyCount * goods.depositRatio / 100) : '***'}}</view>
						</view>
						<view class="item-list">
							<view class="ttl">库存</view>
							<view class="stock">{{goods.stock}}件</view>
						</view>

						<view class="action-btn-group">
							<button type="primary" class=" action-btn default" @click="addCart">加入购物车</button>
							<button type="primary" class=" action-btn" @click="buy">立刻购买</button>
						</view>
					</view>
					<view class="d-desc">
						<view class="d-header">
							<text class="d-ttl">店铺</text>
						</view>
						<view class="d-shop">
							<image :src="goods.goodsPic" mode="scaleToFill"></image>
							<text>{{goods.goodsName}}</text>
							<button @click="naviageToShop(goods.sellerId)" class="action-btn default" type="primary">进入店铺</button>
						</view>
					</view>

				</view>
				<!-- #endif -->
			</view>

			<view class="detail-desc detail-desc-500">
				<view class="d-header">
					<text class="d-ttl">商品介绍</text>
					<text class="d-txt">今日交易量：{{goods.salesNum}}次</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-home"></text>
						<text>产地</text>
					</view>
					<text>{{goods.origin}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-chandi"></text>
						<text>存放地</text>
					</view>
					<text>{{goods.storage}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-guige"></text>
						<text>规格</text>
					</view>
					<text>{{goods.specification}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-date"></text>
						<text>出厂日期</text>
					</view>
					<text>{{$util.sliceTime(goods.factoryDate)}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-biaozhun"></text>
						<text>技术标准</text>
					</view>
					<text>{{goods.technicalStandard}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-zhijian"></text>
						<text>质量等级</text>
					</view>
					<text>{{quality[goods.qualityLevel]}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-baozhuang"></text>
						<text>包装方式</text>
					</view>
					<text>{{packing[goods.packing]}}</text>
				</view>
			</view>

			<view class="detail-desc detail-desc-600">
				<view class="d-header">
					<text class="d-ttl">商品详情</text>
				</view>
				<view class="d-info">{{goods.description}}</view>
			</view>

			<view class="detail-desc sp">
				<view class="d-header">
					<text class="d-ttl">店铺</text>
				</view>
				<view class="d-shop">
					<image :src="goods.goodsPic" mode="scaleToFill"></image>
					<text>中天钢材有限公司</text>
					<button @click="naviageToShop(goods.sellerId)" class="mix-btn" type="primary">进入店铺</button>
				</view>
			</view>

			<!-- 评价 -->
			<view class="eva-section">
				<!-- #ifdef H5 -->
				<view class="d-header pc">
					<text class="d-ttl">商品评价</text>
				</view>
				<!-- #endif -->

				<view class="e-header">
					<text class="tit">评价</text>
					<text>({{total}})</text>
					<text @click="navAllAppraise" class="tip">全部评论</text>
					<text class="icon icon-arrow_right"></text>
				</view>
				<view v-for="(item, index) in appraisesList" :key="index" class="eva-box">
					<image class="portrait" :src="item.userImageUrl ? item.userImageUrl : '/static/missing-face.png'" mode="aspectFill"></image>
					<view class="right">
						<text class="name">{{item.userNickName?item.userNickName:('用户' + item.userId)}}</text>
						<text class="con">{{item.content}}</text>
						<view v-if="item.commentPictureArray && item.commentPictureArray.length > 0" class="imgs">
							<image @click="previewImg(item.commentPictureArray, imgIndex)" v-for="(imgItem, imgIndex) in item.commentPictureArray"
							 :key="imgIndex" class="ig" :src="imgItem"></image>
						</view>
						<view class="bot">
							<text class="time">{{$util.sliceTime(item.createTime)}}</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom sp">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="icon icon-home"></text>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<text class="icon icon-cart"></text>
				<text>购物车</text>
			</navigator>
			<view @click="showPhone" class="p-b-btn">
				<text class="icon icon-phone"></text>
				<text>电话</text>
			</view>

			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="addCart">加入购物车</button>
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立刻购买</button>
			</view>
		</view>

		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content">
				<view class="a-t">
					<image :src="goods.goodsPic"></image>
					<view class="right">
						<text class="price">¥{{isAuth ? goods.price : '***'}}</text>
						<text class="stock">库存：{{goods.stock}}件</text>
						<view class="selected">已选：
							<text>{{goods.specification}}</text>
						</view>
					</view>
				</view>
				<view class="attr-list">
					<text>规格</text>
					<view class="item-list">
						<text class="tit selected">{{goods.specification}}</text>
					</view>
					<text>数量</text>
					<view style="height: 70upx; margin-bottom: 40upx; margin-top: -46upx; position: relative;">
						<uni-number-box class="step" :min="1" :max="goods.stock" :value="buyCount" @eventChange="numberChange"></uni-number-box>
					</view>
				</view>
				<button class="btn" @click="toggleSpec">完成</button>
			</view>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box.vue'
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			uniNumberBox,
			uniHeader,
			uniFooter
		},
		data() {
			return {
				id: '',
				goods: {},
				quality: ['优等', '合格', '等外'],
				packing: ['25kg/袋', '1吨/袋'],
				isAuth: false,
				specClass: 'none',
				buyCount: 1,
				toggleCallback: undefined,
				appraisesList: [],
				total: 0, //评价总数
				phone: '',
			}
		},
		onShow() {
			this.isAuth = this.$api.isAuth()
		},
		onLoad(option) {
			this.id = option.id
			uni.showLoading({
				title: '正在加载'
			})
			this.$api.request('/zrGoods/getGoodsInfo', {
				id: this.id,
			}, {
				content: 'application/x-www-form-urlencoded	',
				failback: failres => {
					this.$api.msg(failres.message)
					uni.hideLoading()
				}
			}).then(res => {
				this.goods = res.data
				this.phone = res.data.telephone
				uni.hideLoading()
			})
			// 评价
			this.$api.request('/goods/productCommentPage', {
				productId: this.id,
				type: 0,
				pageNum: 1,
				pageSize: 10
			}, {
				method: 'GET'
			}).then(res => {
				this.appraisesList = res.data.productCommentList
				this.total = res.data.total
			})
		},
		onShareAppMessage() {
			return {
				title: '好货分享-' + this.goods.title,
				imageUrl: 'https://easycampus-asset.oss-cn-shenzhen.aliyuncs.com/sharebg.png',
				path: '/pages/product/detail?id=' + this.goods.id
			}
		},
		methods: {
			naviageToShop(id) {
				uni.navigateTo({
					url: `/pages/shop/shop?id=${id}`
				})
			},
			showPhone() {
				// this.goods.sellerId
				uni.showModal({
					title: '提示',
					content: this.phone,
					confirmText: '拨打',
					success: function(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: this.phone,
							})
						}
					}
				})
			},
			numberChange(data) {
				this.buyCount = data.number
				this.goods.buyCount = this.buyCount
			},
			//规格弹窗开关
			toggleSpec(e) {
				if (this.specClass === 'show') {
					this.specClass = 'hide'
					setTimeout(() => {
						if (this.toggleCallback) {
							this.toggleCallback()
							this.toggleCallback = undefined
						}
						this.specClass = 'none'
					}, 150)
				} else if (this.specClass === 'none') {
					this.specClass = 'show'
				}
			},
			//加入购物车
			addCart(e) {
				//添加到购车车
				if (this.specClass === 'none') {
					this.toggleSpec()
					this.toggleCallback = this.addCart
				} else {
					// this.$api.msg('添加购物车成功')
					this.$api.request('/shopcar/addGoodsToShopcar', {
						goodsId: this.id,
						buyCount: this.buyCount
					}, {
						content: 'application/x-www-form-urlencoded	'
					}).then(res => {
						this.$api.msg('添加购物车成功')
					})
				}
			},
			buy() {
				if (this.specClass === 'none') {
					this.toggleSpec()
					this.toggleCallback = this.buy
				} else {
					this.goods.buyCount = this.buyCount
					this.$api.globalData.goodsList = []
					this.$api.globalData.goodsList.push(this.goods)
					uni.navigateTo({
						url: `/pages/order/create?takeway=buy`
					})
				}
			},
			//查看所有评价
			navAllAppraise() {
				uni.navigateTo({
					url: `/pages/product/appraise?id=${this.goods.id}`
				})
			}
		},
	}
</script>

<style lang='scss'>
	page {
		padding-bottom: 160upx;
	}

	.icon-arrow_right {
		font-size: $base-font-base + 2upx;
		color: #888;
	}

	/* 轮播图 */
	.carousel {
		height: 510upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 510upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20upx $base-row-spacing;
		border-bottom: 20upx solid $base-color-bg;

		.title {
			display: block;
			font-size: $base-font-base;
			color: $base-color-dark;
			line-height: 40upx;
		}

		.price-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10upx 0;
			font-size: $base-font-lg;
			color: $base-color-warning;
		}

		.price {
			font-size: $base-font-lg + 4upx;
		}

		.size {
			display: inline-block;
			vertical-align: top;
			margin-left: 40upx;
			padding: 0 20upx;
			font-size: $base-font-base;
			color: $base-color-light;
			line-height: 45upx;
			border-radius: 20upx;
			background-color: #f0f0f0;
		}

		.time {
			margin-left: 40upx;
			font-size: $base-font-sm;
			color: $base-color-light;

		}
	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $base-color-base;
		background: linear-gradient(to left, #fdf5f6, #fbebf6);
		padding: 12upx $base-row-spacing;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1upx solid $base-color-page;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $base-color-page;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $base-color-page;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $base-font-base;
			margin-left: 10upx;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $base-font-sm;
			color: $base-color-page;
		}

		.icon-arrow_right {
			font-size: $base-font-sm;
			margin-left: 4upx;
			color: $base-color-page;
		}
	}

	.c-list {
		font-size: $base-font-sm + 2upx;
		color: $base-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx $base-row-spacing;
			position: relative;
		}

		.tit {
			width: 140upx;
		}

		.con {
			flex: 1;
			color: $base-color-dark;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.bz-list {
			height: 40upx;
			font-size: $base-font-sm + 2upx;
			color: $base-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $base-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $base-color-warning;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $base-font-sm + 2upx;
			color: $base-color-light;

			.tit {
				font-size: $base-font-base + 2upx;
				color: $base-color-dark;
				margin-right: 4upx;

				&+text {
					margin-right: 10upx;
				}
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-arrow_right {
				margin-left: 0;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $base-font-base;
			color: $base-color-base;
			padding-left: 20upx;

			.con {
				font-size: $base-font-base;
				color: $base-color-dark;
				padding: 20upx 0;
			}

			.imgs {
				.ig {
					width: 190upx;
					height: 190upx;
					padding: 4upx;
				}
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $base-font-sm;
				color: $base-color-light;
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
				;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $base-font-sm + 2upx;
				color: $base-color-base;
				line-height: 42upx;

				.price {
					font-size: $base-font-lg;
					color: $base-color-page;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $base-font-base + 2upx;
			color: $base-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 30upx 0 0;
			display: flex;
			flex-wrap: wrap;

			.tit {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $base-font-base;
				color: $base-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $base-color-page;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $base-color-page;
				font-size: $base-font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 690upx;
		height: 100upx;
		padding: 0 $base-row-spacing;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $base-font-sm;
			color: $base-color-base;
			width: 96upx;
			height: 80upx;

			.icon {
				font-size: 40upx;
				line-height: 48upx;
				color: $base-color-light;
			}

			&.active,
			&.active .icon {
				color: $base-color-page;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1upx 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1upx solid rgba(255, 255, 255, .5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0;
				padding: 0;
				width: 180upx;
				height: 100%;
				font-size: $base-font-base;
				border-radius: 0;
				background: transparent;
			}
		}
	}

	.rich-img {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		line-height: 0px;
	}

	button::after {
		border: none;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		page {
			padding-bottom: 0;
		}

		.product-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 20px;
		}

		/* 轮播图 */
		.carousel {
			width: 500px;
			height: 500px;
			position: relative;

			.swiper-item {
				height: 500px;
			}

		}

		/* 标题简介 */
		.introduce-section {
			margin-bottom: 20px;
			padding: 20px 30px;
			width: 680px;
			min-height: 500px;
			border-bottom: 0;
			background: #fff;

			.title {
				font-size: 24px;
				line-height: 40px;
			}

			.price-box {
				justify-content: flex-start;
				padding: 10px 0 0;
				font-size: 16px;
			}

			.price {
				font-size: 28px;
				line-height: 30px;
			}

			.size {
				margin-left: 30px;
				padding: 0 20px;
				font-size: 16px;
				line-height: 30px;
				border-radius: 20px;
			}

			.time {
				margin-left: 30px;
				font-size: 16px;
			}
		}

		/* 分享 */
		.share-section {
			padding: 12px 30px;

			.share-icon {
				width: 70px;
				height: 30px;
				border: 1px solid $base-color-page;
				border-radius: 4px;
				font-size: 22px;

				&:after {
					width: 50px;
					height: 50px;
					left: -20px;
					top: -12px;
				}
			}

			.icon-xingxing {
				position: relative;
				z-index: 1;
				font-size: 24upx;
				margin-left: 2upx;
				margin-right: 10upx;
				color: #fff;
				line-height: 1;
			}

			.tit {
				font-size: $base-font-base;
				margin-left: 10upx;
			}

			.icon-bangzhu1 {
				padding: 10upx;
				font-size: 30upx;
				line-height: 1;
			}

			.share-btn {
				flex: 1;
				text-align: right;
				font-size: $base-font-sm;
				color: $base-color-page;
			}

			.icon-arrow_right {
				font-size: $base-font-sm;
				margin-left: 4upx;
				color: $base-color-page;
			}
		}

		.c-list {
			font-size: 16px;

			.c-row {
				padding: 20px 30px;
			}

			.tit {
				width: 140px;
			}

			.con {

				.selected-text {
					margin-right: 10px;
				}
			}

			.bz-list {
				height: 40upx;
				font-size: $base-font-sm + 2upx;
				color: $base-color-dark;

				text {
					display: inline-block;
					margin-right: 30upx;
				}
			}

			.con-list {
				flex: 1;
				display: flex;
				flex-direction: column;
				color: $base-color-dark;
				line-height: 40upx;
			}

			.red {
				color: $base-color-warning;
			}
		}

		/* 评价 */
		.eva-section {
			margin: 0 0 20px;
			padding: 0;
			width: 100%;

			.d-header {
				margin-top: -1px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				height: 50px;
				padding: 0 10px;
				border-top: 1px solid rgba(245, 245, 245, 1);
				border-bottom: 1px solid rgba(245, 245, 245, 1);

				text {
					padding: 0 10px;
					background: #fff;
					position: relative;
					z-index: 1;
				}

				.d-ttl {
					line-height: 50px;
				}

				.d-txt {
					display: block;
					padding: 0 15px;
					color: #fff;
					line-height: 30px;
					border-radius: 25px;
					background-color: rgba(140, 178, 255, 1);
				}

				&:after {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					height: 30px;
					width: 4px;
					background-color: $base-color-pc;
					border-radius: 0;
					opacity: 0.8;
				}
			}

			.e-header {
				padding: 0 30px;
				height: 50px;
				font-size: 16px;

				.tit {
					font-size: 16px;
					margin-right: 4px;
				}

				.icon-arrow_right {
					margin-left: 0;
					font-size: 19px;
				}
			}
		}

		.eva-box {
			padding: 20px 30px;
			border-top: 1px solid $base-color-light;

			&:first-child {
				border: 0;
			}

			.portrait {
				width: 50px;
				height: 50px;
				border-radius: 100px;
			}

			.right {
				font-size: 16px;
				padding-left: 20px;

				.con {
					font-size: 16px;
					padding: 10px 0;
				}

				.imgs {
					.ig {
						width: 100px;
						height: 100px;
						padding: 4px;
					}
				}

				.bot {
					font-size: 14px;
				}
			}
		}

		/* 规格选择弹窗 */
		.attr-content {
			padding: 0;
			position: relative;

			.d-desc {
				position: absolute;
				right: -30px;
				top: 10px;
				width: 200px;
				line-height: 40px;
				text-align: center;

				.d-header {
					padding: 0 20px;
					color: #fff;
					line-height: 30px;
					background-color: $base-color-pc;
					text-align: center;
				}

				image {
					display: block;
					margin: 0 auto;
					width: 80px;
					height: 80px;
				}

				.d-shop {
					padding: 20px 0;
					line-height: 40px;
					border: 1px solid $base-color-light;
					border-top: 0;

					.action-btn {
						margin: 0 auto;
						width: 100px;
						min-width: 100px;
						height: 30px;
						line-height: 30px;
						border-radius: 38px;
						font-size: 14px;
					}
				}
			}

			.attr-list {
				width: 400px;
				padding: 10px 0 0;
				font-size: 16px;
			}

			.item-list {
				flex-wrap: nowrap;
				padding: 0 0 10px;
				align-items: center;

				.ttl {
					display: block;
					align-self: flex-start;
					margin-right: 10px;
					width: 60px;
					height: 40px;
					line-height: 40px;
				}

				.tit-box {
					display: flex;
					flex-wrap: wrap;
					margin: -10px 0 0 0;
				}

				.tit {
					margin: 10px 0 0 10px;
					border-radius: 30px;
					min-width: auto;
					height: 30px;
					padding: 0 20px;
					font-size: 16px;
					cursor: pointer;
				}

				.selected {
					background: #fbebee;
					color: $base-color-pc;
				}

				.stock,
				.uni-numbox {
					margin-left: 10px;
				}

				.price-item {
					margin-left: 10px;
					font-size: 28px;
					line-height: 40px;
					color: $base-color-warning;
				}
			}
		}

		.detail-desc-500 {
			width: 320px;
		}

		.detail-desc-600 {
			width: 860px;
		}
	}

	/* #endif */
</style>
